<template>
	<view style="width: 100%;height: 100%;">
		<view id="mapDiv" style="width: 100%;height: 100%;" />
		<view class="tool-box-container">
			<view class="tool-box">
				<view v-if="showSwitchBtn" @click="switchClick">
					<u-icon name="/static/icons/tool_icon/list.png" size="50"></u-icon>
				</view>
				<view @click="zoomIn">
					<u-icon name="/static/icons/tool_icon/zoom_in.png" size="50"></u-icon>
				</view>
				<view @click="zoomOut">
					<u-icon name="/static/icons/tool_icon/zoom_out.png" size="50"></u-icon>
				</view>
				<view v-if="showLoc" @click="getLocation">
					<u-icon name="/static/icons/tool_icon/location.png" size="50"></u-icon>
				</view>
				<view v-if="showGol" @click="fitBounds">
					<u-icon name="/static/icons/tool_icon/global.png" size="50"></u-icon>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../common/wst_hydra-1.0.0.js')
	import coordtransform from 'coordtransform';
	import L from "leaflet"
	import {
		customMarker
	} from "@/common/gis/LeafletEx/MarkerEx.js"
	import "leaflet/dist/leaflet.css";
	import {
		$config
	} from '@/common/gis/config/gis_config';
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		props: {
			showSwitchBtn: {
				type: Boolean,
				default: false
			},
			showLoc: {
				type: Boolean,
				default: true
			},
			showGol: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				searchPoints: [],
				map: null,
				gis: {},
				viewDivId: "mapDiv",
				baseLayers: {},
				layers: {},
				fitLayerName: "",
				tempMark: '',
			}
		},
		created() {
			const baseMap = $config.gisConfig.mapBaseTDTLayerServers.map(function(item) {
				return L.tileLayer(
					item.url, {
						subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
					},
				)
			})
			this.baseLayers["地图"] = L.layerGroup(
				baseMap
			);
		},
		mounted() {
			let that = this
			this.$nextTick(() => {
				that.initMap();
				that.ready = true;
				that.$ownerInstance.callMethod("emitSomething", {
					name: "mapMounted"
				});
			});
		},
		methods: {
			// 初始化地图
			initMap() {
				let option = {
					layers: [this.baseLayers["地图"]],
					attributionControl: false,
					zoomControl: false,
				};
				this.map = L.map(this.viewDivId, option);
				this.map.setView($config.gisConfig.centerPoint.reverse(), 11);
			},
			// 添加点图层
			addPointTolayer(layerName, points) {
				let that = this;
				let newLayer = {
					layerName,
					points
				}
				if (newLayer === null) {
					return;
				}
				if (that.layers[newLayer.layerName] != null) {
					that.layers[newLayer.layerName].clearLayers();
				}
				let pLayer = L.featureGroup()
				newLayer.points.forEach(point => {
					// let mark = L.markerEx([point.lat, point.lng])
					let mark = new customMarker([point.lat, point.lng], {
						attr: point
					})
					let markIcon = L.icon({
						iconUrl: `static/icons/ss_icon/${point.icon}.png`,
						iconSize: [60, 66],
						iconAnchor: [30, 33]
					});
					mark.setIcon(markIcon)
					mark.addTo(pLayer)
				})
				pLayer.on('click', (e) => {
					// console.log(e.layer.options.attr);
					that.$ownerInstance.callMethod("emitSomething", {
						name: "pointClick",
						e: e.layer.options.attr
					});
				})
				// pLayer
				this.fitLayerName = newLayer.layerName;
				this.layers[newLayer.layerName] = pLayer;
				this.map.addLayer(pLayer);
				if (newLayer.points.length > 0) {
					this.map.fitBounds(pLayer.getBounds())
				}
			},
			// 放大
			zoomIn() {
				this.map.zoomIn(1);
			},
			// 缩小
			zoomOut() {
				this.map.zoomOut(1);
			},
			// 自适应
			fitBounds() {
				const border = require("@/static/assets/border.json")
				this.map.fitBounds(L.geoJson(border).getBounds())
			},
			// 定位
			async getLocation() {
				let that = this
				window.croods.customPlugin({
					action: 'ServicePermissionPlugin.getLocation',
					params: {
						reason: '获取定位信息',
						required: 1,
						permissionPurpose: '定位当前位置',
						coorType: 'GCJ02'
					},
					success: function(res) {
						if (that.tempMark != '') {
							that.tempMark.removeFrom(that.map)
						}
						let wgs84Coords = coordtransform.gcj02towgs84(res.longitude, res.latitude);
						that.map.setView(L.latLng(wgs84Coords[1], wgs84Coords[0]), 16);
						let mark = new customMarker([wgs84Coords[1], wgs84Coords[0]])
						that.tempMark = mark
						let markIcon = L.icon({
							iconUrl: `static/icons/ss_icon/location.png`,
							iconSize: [30, 34],
							iconAnchor: [30, 33]
						});
						mark.setIcon(markIcon)
						mark.addTo(that.map)
					},
					fail: function(msg) {
						that.$u.toast(msg);
					}
				});
				/* var result = await permision.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION")
				if (result == 1) {
					if (permision.checkSystemEnableLocation()) {
						let location = await uni.getLocation();
						this.map.setView(L.latLng(location.latitude, location.longitude), 13);
					} else {
						uni.showModal({
							content: "当前手机未开启定位服务！",
							showCancel: false
						});
					}
				} else if (result == 0) {
					uni.showModal({
						content: "定位权限被永久拒绝！",
						showCancel: true,
						success() {
							permision.gotoAppPermissionSetting()
						}
					});
				} else {
					uni.showModal({
						content: "定位权限被永久拒绝！",
						showCancel: false
					});
				} */
			},
			moveByPoints(points) {
				let that = this;
				if (points == null) {
					points = [];
				}
				if (points.length == 0) {
					return;
				} else if (points.length == 1) {
					that.map.setZoom(17);
					that.map.panTo(L.latLng(points[0][0], points[0][1]));
				} else {
					let bounds = points.map(p => L.latLng(p[0], p[1]));
					that.map.fitBounds(L.latLngBounds(bounds));
				}
			},
			getCenterLatLng() {
				return this.map.getCenter();
			},
			goToLoc(point) {
				this.map.panTo(L.latLng(point.lat, point.lng));
				this.map.setZoom(16);
			},

			emitSomething(obj) {
				this.$emit(obj.name, obj.e);
			},
			switchClick() {
				this.$emit("switchClick");
			},
			resetMap() {
				let that = this;
				setTimeout(() => {
					that.map.invalidateSize(true)
				}, 500)
			}
		}
	}
</script>

<style>
	.tool-box-container {
		z-index: 12000;
		/* float: right; */
		position: absolute;
		top: 15vh;
		right: 10px;
	}

	.tool-box {
		/* position: absolute;
		top: 50px; */
		display: flex;
		height: 100px;
		flex-direction: column;
	}
</style>